<template>
	<!-- 商品卡片组件 -->
	<view class="goods_card_container">
		<view class="goods_info_l">
			<image class="goods_info_l_img" :src="goodsInfo.cover?(baseUrl + goodsInfo.cover): ''" mode="widthFix"></image>
		</view>
		<view class="goods_info_r">
			<view class="goods_info_name">
				{{ goodsInfo.goodsName }}
			</view>
			<view class="goods_info_specis">
				<view class="goods_info_speci_item" v-for="(item, index) of orderInfo.specifications" :key="index">
					{{ item.speciValue.specisValue }}
				</view>
			</view>
			<view class="goods_info_price_number">
				<view class="goods_info_price">
					￥<span style="font-size: 18px;">{{ goodsInfo.price }}</span>
				</view>
				<view class="goods_info_number">
					x {{ orderInfo.number }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 商品信息
let orderInfo = ref({
	specifications:[],
	goodsInfo:{},
	number: 0,
	address:""
});
let goodsInfo = ref({});
let baseUrl = uni.$baseUrl;

onMounted(() => {
	getGoodsD();
});

// 获取商品数据，渲染商品卡片视图
function getGoodsD() {
	orderInfo.value = JSON.parse(uni.getStorageSync('orderInfo'));
	goodsInfo.value = orderInfo.value.goodsInfo;
}
</script>

<style lang="scss" scoped>
.goods_card_container {
	background-color: #fff;
	display: flex;
	flex-direction: row;
	padding: 20rpx 0px;
}

.goods_info_price_number {
	display: flex;
	justify-content: space-between;
}

.goods_info_l {
	width: 20%;
}

.goods_info_l_img {
	width: 100%;
}

.goods_info_r{
	width: 80%;
}

.goods_info_specis {
	display: flex;
}

.goods_info_name {
	width: 90%;
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 省略号 */
	font-weight: 600;
}

.goods_info_specis{
	font-size: 15px;
	color: #6a6a6a;
	padding: 10rpx 0px;
}

.goods_info_price{
	color: red;
}

.goods_info_number{
	position: relative;
	right: 25rpx;
	color: #565656;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
